<script setup lang="ts">
import { h, useSlots } from "vue";

const props = defineProps<{ level: 1 | 2 | 3 | 4 | 5 | 6 }>();
// 获取插槽对象
const slots = useSlots();
// 获取默认插槽内容
const title = slots.default?.();
console.log(title);
const render = () => {
  return h(`h${props.level}`, title);
};

// 什么是虚拟 DOM
// 虚拟DOM其实就是假的DOM对象, 其实就是 JavaScript 对象, 使用 JavaScript 对象来表示真实DOM对象的一种方式
// 为什么会存在虚拟 DOM 概念
// 因为直接通过 JavaScript 操作真实 DOM 对象性能损耗特别大, 说白了就是卡
// 由于虚拟 DOM 就是 JavaScript 对象, 通过js操作js对象是非常快的
// 在修改真实 DOM 对象之前会先更新虚拟DOM, 将新虚拟DOM和旧的DOM进行对比,找出差异, 差异找出之后再更新真实DOM
// 虚拟DOM的作用就是提升操作dom的性能
// 数组=>li
// ['a', 'b'] => <li>a</li><li>b</li>
</script>
<script lang="ts">
const ary = ["a", "b"];

function renderLi() {
  var str = "<ul>";
  for (var i = 0; i < ary.length; i++) {
    str += "<li>" + ary[i] + "</li>";
  }
  str += "</ul>";
  console.log(str);
  return str;
}
renderLi();
ary[0] = "x";
renderLi();
</script>
<template>
  <render />
</template>
